
<template>
  <container-wrapper
    :designer="designer"
    :field="field"
    :parent-id="parentId"
    :parent-list="parentList"
    :children="children"
    :index-of-parent-list="indexOfParentList"
    @click.native.stop="selectField(fieldId)"
  >
    <!-- <div v-if="children.length === 0" style="height: 40px"></div> -->
    <el-card
      v-show="designer.designStatus ? true : !field.options.hidden"
      class="card-container"
      :class="[
        !!field.options.folded ? 'folded' : '',
        field.options.customClass,
      ]"
      shadow="never"
    >
      <div slot="header" class="clear-fix" @click="toggleCard">
        <div>{{ field.options.label }}</div>
        <i
          v-if="field.options.showFold"
          class="right_icon"
          :class="[
            !field.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up',
          ]"
        />
      </div>
      <el-row
        :gutter="field.options.gutter"
        :class="{ designer: designer.designStatus }"
        class="grid_unit"
      >
        <draggable
          :list="children"
          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
          handle=".drag-handler"
          :move="() => true"
          @update="onGridDragUpdate"
        >
          <div v-if="children.length === 0" style="height: 72px" />
          <transition-group name="fade" tag="div" class="form-unit-list">
            <template v-for="(unit, index) in children">
              <template v-if="typeof unit === 'string'">
                <!-- 输入字段单元 -->
                <component
                  :is="getUnitName(unit)"
                  :key="unit"
                  :field-id="unit"
                  :designer="designer"
                  :parent-id="unit"
                  :parent-list="children"
                  :index-of-parent-list="index"
                  :form-data="formData"
                />
              </template>
              <template v-else>
                <!-- 容器单元 -->
                <component
                  :is="getUnitName(unit.id)"
                  :key="unit.id"
                  :field-id="unit.id"
                  :children="unit.children"
                  :designer="designer"
                  :parent-id="unit.id"
                  :parent-list="children"
                  :index-of-parent-list="index"
                  :form-data="formData"
                />
              </template>
            </template>
          </transition-group>
        </draggable>
      </el-row>
    </el-card>
  </container-wrapper>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import Draggable from "vuedraggable";
import ContainerWrapper from "./container-wrapper";
import containerMixin from "./containerMixin";
import FieldComponents from "../field_unit/index";
import TableUnit from "../field_unit/table_field_unit/table_unit.vue";
import "./index";
export default {
  name: "card_unit",
  componentName: "LayoutUnit",
  components: {
    Draggable,
    ContainerWrapper,
    ...FieldComponents,
    table_unit: TableUnit,
  },
  mixins: [containerMixin],
  props: {
    designer: Object,
    fieldId: String,
    children: Array,
    parentId: String,
    parentList: Array,
    indexOfParentList: Number,
    formData: Object,
  },
  methods: {
    getUnitName(unit) {
      // console.log("getUnitName in grid", this.fieldLib[unit]);
      return this.fieldLib[unit].type + "_unit";
    },
    onGridDragUpdate() {
      this.designer.emitHistoryChange();
    },
    toggleCard() {
      if (this.field.options.showFold)
        this.field.options.folded = !this.field.options.folded;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-card__header {
    padding: 10px 12px;
  }
  .el-card__body {
    padding: 5px;
  }
}

.folded ::v-deep .el-card__body {
  display: none;
}
.clear-fix {
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.right_icon {
  padding: 4px;
}
// .clear-fix:before,
// .clear-fix:after {
//   display: table;
//   content: "";
// }

// .clear-fix:after {
//   clear: both;
// }

.float-right {
  float: right;
}

::v-deep {
  .designer.el-row {
    min-height: 72px;
  }
}
</style>
